<template>
  <div class="div">
    <el-button @click="prev">上一页</el-button>
    <el-button @click="next">下一页</el-button>
<!--    <el-button @click="zoomA">放大</el-button>-->
<!--    <el-button @click="zoomB">缩小</el-button>-->
  </div>
  <vue-pdf-embed :source="state.source"
                 class="vue-pdf-embed"
  />
</template>

<script>
import {defineComponent, reactive, onMounted, computed} from "vue";
import {useRoute} from 'vue-router'
import VuePdfEmbed from "vue-pdf-embed";
import {createLoadingTask} from "vue3-pdfjs/esm";

export default defineComponent({
  name: "previewPdf",
  components: {VuePdfEmbed},
  setup() {
    const router = useRoute();
    const state = reactive({
      source: "http://localhost:8080/explorefeedback/getfile?exploreid=tk03&mfileid=%E6%80%BB%E7%BB%93.pdf", //预览pdf文件地址
      pageNum: 1, //当前页面
      scale: 1, // 缩放比例
      numPages: 0, // 总页数
    });
    const prev = () => {
      if (state.pageNum > 1) {
        state.pageNum -= 1
      }
    }
    const next = () => {
      if (state.pageNum < state.numPages) {
        state.pageNum += 1
      }
    }
    const zoomA = () => {
      state.scale += 0.1
    }
    const zoomB = () => {
      state.scale -= 0.1
    }
    onMounted(() => {
      const loadingTask = createLoadingTask(state.source);
      loadingTask.promise.then((pdf) => {
        state.numPages = pdf.numPages;
      });

    })
    return {
      router,
      state,
      prev,
      next,
      zoomA,
      zoomB,
    }
  }
})
</script>

<style scoped>
.div {
  top: 0;
  position: fixed;
  z-index: 999;
}

.vue-pdf-embed {
  text-align: center;
}
</style>
